<template>
    <Modal
            class-name="menu-dialog-wrap"
            :mask-closable="false"
            v-model="visible"
            title="菜单信息"
            width="550"
            @on-cancel="close">

        <Form :ref="validRef" :model="formData" :label-width="80" :rules="rules" @submit.native.prevent j-loading="menu.saveInfo,menu.getInfo">
            <FormItem label="菜单名称" prop="name">
                <Input v-model="formData.name" placeholder="请输入菜单名称" :disabled="readonly"/>
            </FormItem>

            <FormItem label="菜单编码" prop="code">
                <Input v-model="formData.code" placeholder="请输入菜单编码" :disabled="readonly"/>
            </FormItem>

	        <FormItem label="菜单图标" prop="iconSkin">
		        <Input v-model="formData.iconSkin" placeholder="请输入菜单图标" :disabled="readonly"/>
	        </FormItem>

	        <FormItem label="排序" prop="sort" :rules="{required: true, message: '请填写排序值'}">
		        <InputNumber :min="0" :step="1" v-model="formData.sort" placeholder="排序" style="width: 100%;"/>
	        </FormItem>

            <FormItem label="备注信息" prop="remark">
                <Input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" :rows="3" resize="none" :disabled="readonly"/>
            </FormItem>
        </Form>

        <template slot="footer">
	        <Button type="primary" class="button-wide" @click="submitHandler">提交</Button>
        </template>
    </Modal>
</template>

<script>
    import JBoot from "jboot-env";

    export default JBoot.form({
        data() {
            return {
                moduleName: 'menu',
                rules: Object.freeze({
                    name: [{required: true, message: '请填写菜单名称'}],
                    code: [{required: true, message: '请填写菜单编码'}],
                    remark: [{min:0, max: 255, message: '备注限制0~255个字符'}]
                })
            }
        },

        methods: {
	        getDefFormData() {
		        return {
			        parentId: this.parentParam.parentId || 0,
			        sort: 999
		        };
	        },
        }
    });
</script>

<style lang="scss">
    .menu-dialog-wrap {
        & .ivu-form-item {
            margin-bottom: 20px !important;

            &:last-child {
                margin-bottom: 5px !important;
            }
        }
    }
</style>
